<template>
  <div class="dashboard-container">
    <div class="app-container">
      <el-card>
        <!-- 新增角色按钮 -->
        <el-row style="height:60px">
          <el-button
            icon="el-icon-plus"
            size="small"
            type="primary"

            @click="addRole"
          >新增角色</el-button>
        </el-row>
        <!-- 表格 -->
        <el-table :data="roleList">
          <!--如果设置了 type=index，可以通过传递 index 属性来自定义索引 可传值类型为数字或者函数 -->
          <!-- <el-table-column label="序号" width="120" type="index" :index="indexEdit" /> -->
          <el-table-column label="序号" width="120">
            <template #default="scope">
              {{ params.pagesize*(params.page-1)+(scope.$index+1) }}
              <!-- {{ (scope.$index+1)*2 }} -->
            </template>
          </el-table-column>
          <el-table-column label="角色名称" width="240" prop="name" />
          <el-table-column label="描述" prop="description" />
          <el-table-column label="操作" width="240" fixed="right">
            <template #default="{row}">
              <el-button size="small" @click="openAssignDialog(row.id)">分配权限</el-button>
              <el-button size="small" @click="editRole(row.id)">编辑</el-button>
              <el-button size="small" type="danger" @click="delRole(row.id)">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
        <!-- 分页组件 -->
        <el-row type="flex" justify="center" align="middle" style="height: 60px">
          <!-- 分页组件 -->
          <el-pagination layout="prev,pager,next" :current-page="params.page" :page-size="params.pagesize" :total="total" @current-change="pageChange" />
        </el-row>
      </el-card>
    </div>

    <!-- 使用新增角色弹窗组件 -->
    <add-role-dialog ref="addRole" :add-visible="dialogVisible" @fetch-role-list="fetchRoleList" @close-dialog="closeDialog" />

    <!-- 分配权限组件弹窗 -->
    <!-- 分配权限的弹层 -->
    <el-dialog
      title="分配权限(一级为路由页面查看权限-二级为按钮操作权限)"
      :visible="showAssignDialog"
      @close="closeAssignDialog"
    >
      <!-- 权限点数据展示 -->
      <el-tree
        ref="tree"
        :data="permissionList"
        :props="{ label: 'name' }"
        :default-expand-all="true"
        :show-checkbox="true"
        :check-strictly="true"
        node-key="id"
      />

      <template #footer>
        <div style="text-align: right;">
          <el-button @click="closeAssignDialog">取消</el-button>
          <el-button type="primary" @click="clickAssign">确定</el-button>
        </div>
      </template>
    </el-dialog>
  </div>
</template>
<script>
import { getRoleList, deleteRole, assignPerm, getRoleDetailById } from '@/api/setting.js'
import AddRoleDialog from '@/views/Setting/component/add-role.vue'
import { getPermissionList } from '@/api/permission'
import transTree from '@/utils/transTree'
export default {
  name: 'RoleIndex',
  components: {
    AddRoleDialog
  },
  data() {
    return {
      roleList: [],
      params: {
        page: 1,
        pagesize: 2
      },
      total: 0,
      dialogVisible: false,
      showAssignDialog: false,
      permissionList: [], // 存储权限数据
      roleId: ''
    }
  },
  // 利用生命周期函数自动调用获取列表
  mounted() {
    this.fetchRoleList()
  },
  methods: {
    // 获取角色列表
    async fetchRoleList() {
      const { rows, total } = await getRoleList(this.params)
      this.roleList = rows
      this.total = total
    },
    // 实现分页功能
    pageChange(page) {
      // 更改页码为当前用户点击页面
      this.params.page = page
      // 更新列表数据
      this.fetchRoleList()
    },
    // 删除角色
    delRole(id) {
      // 跟用户确认
      this.$confirm('确认要删除这个角色吗？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(async() => {
        // 调用删除接口
        await deleteRole(id)
        // 提示用户删除成功
        this.$message.success('删除成功')
        // 更新列表
        this.fetchRoleList()
      }).catch(() => {
        this.$message.error('删除失败')
      })
    },
    addRole() {
      // 显示弹出层
      this.dialogVisible = true
    },
    // 关闭弹层
    closeDialog() {
      this.dialogVisible = false
    },
    // 编辑角色
    editRole(id) {
      this.dialogVisible = true
      // 直接获取子组件的实例对象 调用它内部的方法或者直接操作属性
      this.$refs.addRole.getRoleDetail(id)
    },
    // 定义一个函数，修改table的序号index
    // indexEdit(index) {
    //   // index是从0 开始计算，所以第一个序号为index+1，将角色列表序号变为偶数（2,4,6,8）
    //   // return (index + 1) * 2

    //   // 将角色列表序号变成连续数字
    //   // 每一页的每个角色序号= 当前点击页之前的所有角色数量+（当前页角色的索引+1)
    //   return (index + 1) + (this.params.page - 1) * this.params.pagesize
    // }
    async openAssignDialog(id) {
      this.showAssignDialog = true
      this.roleId = id

      const res = await getPermissionList()
      this.permissionList = transTree(res)

      // 数据回显
      const roleList = await getRoleDetailById(id)
      this.$refs.tree.setCheckedKeys(roleList.permIds)
    },
    closeAssignDialog() {
      this.showAssignDialog = false
      // 清空已选权限
      this.$refs.tree.setCheckedKeys([])
    },
    // 提交选择的权限
    async clickAssign() {
      await assignPerm({
        id: this.roleId,
        permIds: this.$refs.tree.getCheckedKeys()
      })

      this.$message.success('分配成功')
      this.showAssignDialog = false
    }
  }
}
</script>
